<template>
  <!-- 全屏容器 -->
  <YkiteFullScreenContainer>
    <div class="data-view">
      <img v-if="technologyConfig.background" :src="technologyConfig.background" class="image-background" alt="">
      <div class="dView-head">
        <header-bi :title="pageInfo.pageName" :headerData="pageInfo.header" v-if="pageInfo.header"
                   :pageTemplate="pageInfo.pageTemplate"></header-bi>
      </div>
      <!-- 时间范围 -->
      <a-row align="center" class="time-search">
        <a-col>
          <a-row align="center" style="width: 100%;">
            <!-- 左侧时间范围 -->
            <a-col :span="12">
              <a-space>
                <a-typography-text class="search-label">时间范围</a-typography-text>
                <component
                    class="search-picker"
                    :is="timeOptions.timeUnit === 0 ?'a-date-picker' : timeOptions.timeUnit === 1 ? 'a-month-picker' : 'a-year-picker'"
                    v-model="timeOptions.timer"
                    :format="timeOptions.timeUnit === 0 ?'YYYY-MM-DD' : timeOptions.timeUnit === 1 ? 'YYYY-MM' : 'YYYY'"></component>
                <a-button type="primary" class="search-button" @click="handleSearch">查询</a-button>
              </a-space>
            </a-col>
            <!-- 右侧年月日返回 -->
            <a-col :span="12" style="text-align: right;">
              <a-space>
                <a-button type="primary" v-for="(item,index) in dateList" :key="index"
                          :class="['time-button', index==dateCheckIndex?'time-button-active':'']"
                          @click="handleTimeType(item.value)">{{ item.label }}
                </a-button>
                <a-button type="primary" class="search-button" @click="back">
                  <img src="@/assets/bi/technology/icon-back.png" alt="">
                  返回
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <div class="dView-content">
        <div class="dView-content-list">
          <chart-wrapper :title="dataInfo.cardName">
            <!--            <template v-slot:button>-->
            <!--              <a-button type="primary" v-for="val in buttonList" :key="val">{{ val }}</a-button>-->
            <!--            </template>-->
            <template v-slot:chart>
              <div class="chart-wrapper-content">
                <component :is="EnumChartType[chartParams.chartType]"
                           isDownload
                           :configType="0"
                           ref="chartRef"
                           :public="{cardKey: chartParams.cardKey,chartType: chartParams.chartType, dashboardConfigId: chartParams.dashboardConfigId,tablePre:2}"
                           :totalType="1"></component>
              </div>
            </template>
            <template #extra>
              {{ chartParams.unit }}
            </template>
          </chart-wrapper>
        </div>
        <!--        <div class="dView-content-list dView-content-list-multi">-->
        <!--          <div class="multi-li" v-for="(val,idx) in 6" :key="idx">-->
        <!--            <chart-wrapper :title="'实时日总发电量'">-->
        <!--              <template v-slot:button>-->
        <!--                <a-button type="primary">下载</a-button>-->
        <!--              </template>-->
        <!--              <template v-slot:chart>-->
        <!--                <div class="chart-wrapper">-->
        <!--                  <div class="chart">-->
        <!--                    <chart-category :option="idx % 2 === 0 ? cardInfo2.option : cardInfo.option"/>-->
        <!--                  </div>-->
        <!--                  <div class="description">-->
        <!--                    <list-detail :isHasBorder="false"/>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--              </template>-->
        <!--              <template #extra>-->
        <!--                kwh-->
        <!--              </template>-->
        <!--            </chart-wrapper>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="dView-content-list dView-content-list-table"
             v-show="dataInfo?.tableInfo?.tableData.length>0 && chartParams.chartType!=16 &&chartParams.chartType!=15">
          <chart-wrapper :title="dataInfo.cardName">
            <template v-slot:button>
              <a-button type="primary" @click="downTable">下载</a-button>
            </template>
            <template #chart>
              <table-list ref="tableRef" @result="handleResult"></table-list>
            </template>
          </chart-wrapper>
        </div>
      </div>
    </div>
  </YkiteFullScreenContainer>
</template>

<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from "vue";
import {useRouter, useRoute} from 'vue-router';
import useLoading from "@/hooks/loading";
import HeaderBi from "@/views/bi/components/headerBi.vue";
import ChartWrapper from "@/views/bi/template/technology/components/chart-wrapper.vue";
import TableList from "@/views/bi/template/technology/components/table-list-scroll.vue";
import dayjs from "dayjs";
import {getBiInfo} from "@/api/manage/station";
import {notification} from "@/hooks/my-design";

const chartRef = ref<any>(null);
const tableRef = ref<any>(null);
const route = useRoute()
const router = useRouter();
const {loading, setLoading} = useLoading(false);
const EnumChartType: any = {
  1: 'large-combine',
  2: 'large-combine',
  3: 'large-combine',
  4: 'large-stack',
  5: 'large-combine',
  6: 'large-pie',
  7: 'large-k',
  8: 'large-water',
  9: 'large-gauge',
  10: 'large-sankey',
  11: 'large-section',
  12: 'large-ranking',
  13: 'large-screen-status',
  14: 'card-base',
  15: 'large-table',
  16: 'large-table',
  17: 'card-chart-pie-statistics',
  18: 'large-combine',
};

// 功能按钮
const buttonList = ref(['电量', '功率', '下载']);
const chartParams = ref<any>({});
// 监听页面是否存在滚动条
const hasScrollbar = ref(false);
const data = [{
  value: 80,
  name: '光伏',
}, {
  value: 62,
  name: '风能',
}, {
  value: 30,
  name: '其他',
}];
const dateList = ref<any>([{
  value: 0,
  label: '日'
}, {
  value: 1,
  label: '月'
}, {
  value: 2,
  label: '年'
}]);
const dateCheckIndex = ref<number>(0);
// table图表数据
const dataInfo = ref<any>({
  tableInfo: {
    tableData: []
  }
});

const pageInfo = ref<any>({
  pageTemplate: 0,
  background: {
    type: "image",
    url: ''
  },
  cardList: {
    bottomList: [],
    leftTop: [],
    rightTop: []
  }
})

// technology 模板背景配置
const technologyConfig = JSON.parse(import.meta.env.VITE_Bi_TECHNOLOGY_CONFIG);

// 时间选择
const timeOptions = ref<any>({
  timer: dayjs().format("YYYY-MM-DD"),
  timeUnit: 0,
});

const checkScrollbar = () => {
  const body = document.body;
  const html = document.documentElement;
  const hasScroll = html.clientHeight < html.scrollHeight || body.clientHeight < body.scrollHeight;
  hasScrollbar.value = hasScroll;
};

// 返回
const back = () => {
  router.back()
};

// 时间搜索
const handleSearch = () => {
  chartRef?.value?.handleTime(timeOptions.value);
  tableRef?.value?.handleTime(timeOptions.value);
};

// 年月日
const handleTimeType = (unit: number) => {
  dateCheckIndex.value = unit;
  timeOptions.value.timeUnit = unit;
  const params = {
    timeUnit: timeOptions.value.timeUnit,
    timer: dayjs(timeOptions.value.timer).format(unit == 0 ? 'YYYY-MM-DD' : unit == 1 ? 'YYYY-MM' : "YYYY")
  };
  chartRef.value.handleTime(params);
  tableRef?.value.handleTime(params);
}

// 下载表格
const downTable = () => {
  tableRef?.value.downTable();
}

const handleResult = (data: any) => {
  dataInfo.value = data;
}

interface IRouteQuery {
  stationId: string,
  isPre: string,
}

const getInfo = async () => {
  try {
    const {stationId, isPre}: IRouteQuery = chartParams.value;
    const res: any = await getBiInfo({stationId, isPre});
    if (res.code === 200 && !res.data.code) {
      pageInfo.value = {
        ...res.data
      };
    } else {
      notification(res)
    }
  } catch (e) {
    console.log(e, '大屏模板报错')
  }
}

onMounted(() => {
  checkScrollbar();
  chartParams.value = route.query;
  if(chartParams.value.chartType == 16 || chartParams.value.chartType == 15){
    dateCheckIndex.value = 2;
    timeOptions.value.timer = dayjs().format("YYYY");
    timeOptions.value.timeUnit = 2;
  }else{
    dateCheckIndex.value = 0;
    timeOptions.value.timer = dayjs().format("YYYY-MM-DD");
    timeOptions.value.timeUnit = 0;
  }
  getInfo();
  window.addEventListener('resize', checkScrollbar);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkScrollbar);
});


</script>

<style lang="less" scoped>
@font-size: 16px;
@font-size-mini: 14px;
@font-size-medium: 18px;
@font-size-large: 24px;
@color-w: white;
@font-family: Source Han Sans;

.grid-title-num {
  color: #F3921D;
}

.data-view {
  width: 100vw;
  height: 100vh;
  color: @color-w;
  font-family: Source Han Sans;
  display: flex;
  flex-direction: column;

  .image-background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    object-fit: cover;
    min-height: 800px;
  }
}

.dView-head {
  height: 80px;
  background: url("@/assets/bi/technology/navbar.png") no-repeat bottom;
  background-size: 100% auto;
  font-size: 28px;
  padding: 0 32px;
}

//时间范围
.time-search {
  padding: 12px 32px;
  box-sizing: border-box;
  font-family: @font-family;

  .arco-col {
    height: 100%;
  }

  .search-label {
    font-size: @font-size-medium;
    font-weight: normal;
    color: #fff;
    margin-right: 20px;
  }

  /* 时间选择器 */

  :deep(.arco-picker) {
    //width: 328px;
    background-color: transparent;
    border: 1px solid rgba(15, 141, 255, 0.6);

    .arco-picker-range {
      z-index: 2;
    }


    input {
      background-color: transparent;
      color: @color-w;
      text-align: center;
    }

    input::placeholder {
      color: @color-w;
    }

    .arco-picker-separator {
      color: @color-w;
    }

    .arco-picker-suffix-icon {
      color: @color-w;
    }
  }

  :deep(.arco-picker-week-list-item) {
    font-size: @font-size-medium;
  }


  /* 查询,返回按钮 */

  .search-button {
    padding: 5px 16px;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(15, 141, 255, 0.4) 0%, rgba(15, 141, 255, 0) 100%);
    border: 1px solid rgba(15, 141, 255, 0.1);
    margin-left: 20px;
    font-size: @font-size-medium;
    font-weight: normal;
    line-height: 22px;
    color: @color-w;

    &:hover {
      background: linear-gradient(0deg, rgba(15, 141, 255, 0.6) 0%, rgba(15, 141, 255, 0) 100%);
    }

    img {
      margin-right: 8px;
    }
  }

  /* 年月日按钮 */

  .time-button {
    padding: 3px 7px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #3490E3;
    background-color: transparent;

    &:hover {
      background: linear-gradient(0deg, rgba(15, 141, 255, 0.6) 0%, rgba(15, 141, 255, 0) 100%);
    }
  }

  .time-button-active {
    background: linear-gradient(0deg, rgba(15, 141, 255, 0.6) 0%, rgba(15, 141, 255, 0) 100%);
  }
}

.dView-content {
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 32px;

  .dView-content-list {
    height: 360px;
    margin-bottom: 16px;

    .chart-wrapper-content {
      width: 100%;
      height: 100%;
    }
  }

  .dView-content::-webkit-scrollbar {
    display: none;
  }

  .dView-content-list-multi {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    .multi-li {
      height: 22vh;
    }
  }

  .dView-content-list-table {
    height: auto;
  }

  .chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .chart {
      width: 70%;
      height: 100%;
    }

    .description {
      width: 30%;
      height: 100%;
    }
  }
}

.dView-foot {
  height: 50px;
}

:deep(.arco-spin-mask) {
  background: transparent;
}
</style>
